<template>
  <div>
    <!-- 为ECharts准备一个具备大小（宽高) -->
    <div id="ringDiagram" :style="{width: '100%',height:'340px'}"></div>
  </div>
</template>

<script>
  export default {
    name: 'DoughnutChart',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('ringDiagram'))
        // 绘制图表
        myChart.setOption({
          color: ['#4472C5', '#ED7C30', '#80FF80'],//配置颜色
          //指向圆环后展示数据
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          //左边的文字
          legend: {
            textStyle: {//------------此处更改表格中的字体颜色
              fontSize: '12',
            },
            bottom: 45,
            left: 'center',
            data: ['好评率', '差评率', '其他']
          },
          series: [
            {
              name: '司机评分',
              type: 'pie',
              center: ['50%', '35%'],
              radius: ['40%', '60%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '24',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 66, name: '好评率' },
                { value: 22, name: '差评率' },
                { value: 12, name: '其他' },
              ]
            }
          ]
        })
      }
    }
  }
</script>